<template>
    <div  class="container learnstyle-page">

      <div style="position: relative; left: 12%; top: 15%;margin-bottom: 20px;" class="searchbox">
        <el-date-picker
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          @change="getDateStr"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>

        <el-select v-model="value" placeholder="请选择科目">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button class="itemSearch" icon="el-icon-search" @click="searchPaperHistory"  type="primary">查询</el-button>
      </div>

      <template>
        <el-table
          :data="studentPaperList"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            align="center"
            label="试卷名称"
            width="160">
          </el-table-column>

          <el-table-column
            prop="subject_name"
            label="科目"
            align="center"
            width="100">
          </el-table-column>

          <el-table-column
            prop="paper_mark"
            align="center"
            width="100"
            label="试卷总分">
          </el-table-column>

          <el-table-column
            prop="create_date"
            :formatter="formatterCreateDate"
            align="center"
            width="160"
            label="考试时间">
          </el-table-column>

          <el-table-column
            prop="time"
            align="center"
            width="120"
            label="考试用时">
          </el-table-column>

          <el-table-column
            prop="exam_number"
            align="center"
            sortable
            width="100"
            label="参考人数">
          </el-table-column>

          <el-table-column
            prop="system_mark"
            align="center"
            width="80"
            label="系统判分">
          </el-table-column>

          <el-table-column
            prop="teacher_mark"
            align="center"
            width="80"
            label="教师判分">
            <template slot-scope="scope">
              <template v-if="scope.row.correct_flag">
                {{scope.row.teacher_mark}}
              </template>
               <template v-else>
                 <el-tag  type="danger">待批改</el-tag>
               </template>
            </template>
          </el-table-column>

          <el-table-column
            prop="mark"
            width="120"
            sortable
            align="center"
            label="最终得分">
            <template slot-scope="scope">
               <el-tag v-if="scope.row.correct_flag" type="success">{{scope.row.mark}}</el-tag>
               <el-tag v-else type="danger">待批改</el-tag>
            </template>
          </el-table-column>

   <!--       <el-table-column
            prop="mark"
            width="100"
            align="center"
            label="状态">
          </el-table-column>-->

          <el-table-column
            align="center"
            min-width="120"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="lookPaperQuestionInfo(scope.row)"
                type="primary">查看试卷</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          @current-change="changeCurrentPage"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalCount"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </template>

    </div>
</template>

<script>
    export default {
      name: 'examHistory',
      data () {
         return {
           currentPage: 1,
           pageSize: 10,
           totalCount: 0,
           studentPaperList: []
         }
      },

      mounted () {
        this.getStudentPaperList()
      },

      methods: {
        changeCurrentPage (val) {
          this.currentPage = val
          this.getStudentPaperList()
        },

        getStudentPaperList () {
          let that = this
          that.axios.get(that.$httpApi.httpUrl('/student/getPaperHistory'), {
            params: {
              offset: (that.currentPage - 1) * that.pageSize,
              limit: that.pageSize
            }
          }).then(function (response) {
            that.studentPaperList = response.data.data.dataList
            that.totalCount = response.data.data.total
          })
        },

        formatterCreateDate (row, column) {
          if (!row.create_date) {
            return '--'
          }
          return this.moment(row.create_date).format('YYYY-MM-DD HH:mm')
        },

        searchPaperHistory () {

        },

        lookPaperQuestionInfo (item) {
          let paper = {
            id: item.id,
            mark: item.paper_mark,
            name: item.name
          }
          this.$store.commit('updateTestPaperInfo', paper)
          this.$router.push({
            name: 'exam',
            query: {
              from: 'examHistory'
            }

          })
        }
      }
    }
</script>

<style scoped>
  .el-pagination {
    text-align: center;
    margin-top: 20px;
  }
</style>
